<template>
  <div class="v_code">
    <!-- 验证码展示区域 -->
    <div class="code_show">
      <span class="code" id="checkCode">{{ data.code }}</span>
       <a id="linkbt" @click="createCode">看不清换一张</a>
    </div>

    <!-- 验证码输入区域 -->
    <div class="input_code">
      <label for="inputCode">验证码：</label>
      <input type="text" id="inputCode" v-model="userInput" />
    </div>

    <!-- 验证按钮 -->
    <input id="Button1" type="button" value="确定" @click="checkCode" />
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const data = reactive({
  code: '',
  inputCode: ''
})
//createCode()
const createCode = () => {
  data.code = "";
  let code = "abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ@#$%^&*()+-=";
  for (let i = 0; i < 6; i++) {
    let index = Math.floor(Math.random() * code.length);
    data.code += code[index];
  }
}

createCode();

const checkCode = () => {
  if (data.code.toLowerCase() == data.inputCode.toLowerCase()) {
    alert("验证码正确");
  } else {
    alert("验证码错误");
    createCode();
  }
}
</script>
<style scoped>
        .v_code {
            width: 600px;
            margin: 0 auto;
        }

        .v_code>input {
            width: 60px;
            height: 36px;
            margin-top: 10px;
        }

        .code_show {
            overflow: hidden;
        }

        .code_show span {
            display: block;
            float: left;
            margin-bottom: 10px;
        }

        .code_show a {
            display: block;
            float: left;
            margin-top: 10px;
            margin-left: 10px;
        }

        .code {
            font-style: italic;
            background-color: #f5f5f5;
            color: blue;
            font-size: 30px;
            letter-spacing: 3px;
            font-weight: bolder;
            float: left;
            cursor: pointer;
            padding: 0 5px;
            text-align: center;
        }

        #inputCode {
            width: 100px;
            height: 30px;
        }

        a {
            text-decoration: none;
            font-size: 12px;
            color: #288bc4;
            cursor: pointer;
        }

        a:hover {
            text-decoration: underline;
        }

        .form {
            width: 300px;
            height: 300px;
            background-color: #eee;
        }
</style>
